﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Well completion dates for the Hugoton Gas Field Over Time</title>
    
   <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }

      #mapDiv {
        position: relative;
      }

      #bottomPanel {
        left: 50%;
        margin: 0 auto;
        margin-left: -500px;
        position: absolute; 
        bottom: 2.5em;
      }

      #timeInfo{
        border-radius: 4px;
        border: solid 2px #ccc;
        background-color: #fff;
        display: block;
        padding: 5px;
        position: relative;
        text-align: center;
        width: 1000px;
        z-index: 99;
      }
    </style>

 
    <script>
        var map;
        require([
          "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/TimeExtent", "esri/dijit/TimeSlider",
          "dojo/_base/array", "dojo/dom", "dojo/domReady!"
        ], function (
          Map, ArcGISDynamicMapServiceLayer,
          TimeExtent, TimeSlider,
          arrayUtils, dom
        ) {
            map = new Map("mapDiv", {
                basemap: "streets",
                center: [-101.15, 37.604],
                zoom: 9
            });

            var opLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");
            opLayer.setVisibleLayers([0]);

            //应用定义表达式,所以只显示一些功能
            var layerDefinitions = [];
            layerDefinitions[0] = "FIELD_KID=1000148164";
            opLayer.setLayerDefinitions(layerDefinitions);

            //添加图层到地图
            map.addLayers([opLayer]);

            map.on("layers-add-result", initSlider);

            function initSlider() {
                var timeSlider = new TimeSlider({
                    style: "width: 100%;"
                }, dom.byId("timeSliderDiv"));
                map.setTimeSlider(timeSlider);

                var timeExtent = new TimeExtent();
                timeExtent.startTime = new Date("1/1/1921 UTC");//开始时间
                timeExtent.endTime = new Date("12/31/2009 UTC");//结束时间
                timeSlider.setThumbCount(2);//设置指针数量
                timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "esriTimeUnitsYears");//创建时间间隔
                timeSlider.setThumbIndexes([0, 1]);//设置指针索引
                timeSlider.setThumbMovingRate(2000);//设置变化速率
                timeSlider.startup();

                //停止时间段获取标签
                var labels = arrayUtils.map(timeSlider.timeStops, function (timeStop, i) {
                    if (i % 2 === 0) {
                        return timeStop.getUTCFullYear();
                    } else {
                        return "";
                    }
                });

                timeSlider.setLabels(labels);

                timeSlider.on("time-extent-change", function (evt) {
                    var startValString = evt.startTime.getUTCFullYear();
                    var endValString = evt.endTime.getUTCFullYear();
                    dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
                });
            }
        });
    </script>
  </head>
  <body class="claro">

    <div id="mapDiv">
      <div id="bottomPanel">
        <div id="timeInfo">
          <div>Hugoton Gas Field Wells from <span id="daterange">1921 to 2009</span> (Completion date)</div>
          <div id="timeSliderDiv"></div>
        </div>
      </div>
    </div>
  </body>
</html>